import { Layout, Input, Popconfirm ,Tabs} from 'antd'
import { Link, useNavigate } from 'react-router-dom';
import { LogoutOutlined, UserOutlined, UserSwitchOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux'
import './index.scss'
import picter from '@/assets/logo.png'
import { Button } from 'antd';
import {getUserInfoAPI} from '@/apis/article'
import { useEffect, useState } from 'react';
const { Header } = Layout
const { Search } = Input;
const onSearch = (value, _e, info) => console.log(info?.source, value);

const onChange = (key) => {
    console.log(key);
  };
  const items = [
    {
      key: '1',
      label: '帖子',
      children: 'Content of Tab Pane 1',
    },
    {
      key: '2',
      label: '评论',
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: '笔记',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '4',
      label: '问答',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '5',
      label: '专栏',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '6',
      label: '资料',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '7',
      label: '收藏',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '8',
      label: '关注',
      children: 'Content of Tab Pane 3',
    },
    {
      key: '9',
      label: '粉丝',
      children: 'Content of Tab Pane 3',
    },
   
  ];
const App = () => {
    const navigate = useNavigate()
    const [infoList,setInfoList]=useState([]);
    useEffect(()=>{
    async function getInfoList(){
        const res=await getUserInfoAPI()
        // console.log(res.data)
        setInfoList(res.data)
        console.log('嘻嘻')
        console.log('xi',infoList.nickname)

        
    }
    getInfoList()

    },[])
   
    const personalinfo = () => {
        // console.log('点击了个人信息')
        navigate('/person')
    }
    //退出登录确认回调
    const onConfirm = () => {
        // console.log('确认')

        navigate('/login')
    }
    const name = useSelector(state => state.user.userInfo.tokenName)
    const gotoModify=()=>{
        console.log('点击了')
        navigate('/modify')
    }
    return <div>
        <Layout>
            <Header className="header">
                <div className="logo" />
                <div className="user-info">
                    <Link to="/home" className='user-name'>主页</Link>
                    <Link to="/article" className='user-name'>刷八股</Link>
                    <Link to="/publish" className='user-name'>刷OJ</Link>
                    <Link to="/about" className='user-name'>关于我们</Link>


                    <Search
                        placeholder="输入搜索关键词"
                        allowClear
                        onSearch={onSearch}
                        style={{
                            marginTop: 18,
                            width: 200,
                            marginRight: 20
                        }}
                    />
                    <span className="user-name" onClick={personalinfo}><UserOutlined />{name}</span>
                    <span className="user-logout">
                        <Popconfirm title="是否确认退出?" okText="退出" cancelText="取消" onConfirm={onConfirm}>
                            <LogoutOutlined /> 退出
                        </Popconfirm>
                    </span>
                </div>
            </Header>
        </Layout>
        <div className='personinfo'>
            <div className='persondetail'>
                <img src='https://avatars.githubusercontent.com/u/142326902?v=4' className='user-avatar'></img>
                <div className='userinfo'>
                    <span className='user-nikname'>用户昵称 :  {infoList.nickname}</span>
                    <span className='user-introduction'>个人简介 : {infoList.introduce}</span>

                </div>
                <div className='usesex'><UserSwitchOutlined /> {infoList.gander==0?'男':'女'}</div>
            </div>

            <div className='user-activeinfo'>
                <div className='user-detailinfo'>排名<span className='infonumber'>262<span className='info-boder'>|</span> </span></div>
                <div className='user-detailinfo'>积分<span className='infonumber'>262<span className='info-boder'>|</span> </span></div>
                <div className='user-detailinfo'>获赞<span className='infonumber'>262<span className='info-boder'>|</span> </span></div>
                <div className='user-detailinfo'>浏览<span className='infonumber'>262<span className='info-boder'>|</span> </span></div>
                <div className='user-detailinfo'>关注<span className='infonumber'>262<span className='info-boder'>|</span> </span></div>
                <div className='user-detailinfo'>粉丝<span className='infonumber'>262 </span></div>
                <div className='user-detailinfo'> <Button type="primary" ghostv onClick={gotoModify}> 修改资料</Button></div>

            </div> 
        </div>
    <div className='info-box'>
    <div className='info-tab'><Tabs defaultActiveKey="1" items={items} onChange={onChange} className='tab-function' /></div>
    <div className='info-reserve'>功能待开发</div>
    </div> 
    </div>


}
export default App